<template>
  <div class="inventory-count-page">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input 
        placeholder="请输入" 
        prefix-icon="el-icon-search" 
        style="width: 200px; margin-right: 10px;"
      />
      <el-select 
        placeholder="请选择" 
        style="width: 180px; margin-right: 10px;"
      >
        <el-option label="全部" value="" />
        <el-option label="草稿" value="0" />
        <el-option label="有盈亏" value="1" />
        <el-option label="无盈亏" />
      </el-select>
      <el-select 
        placeholder="请选择" 
        style="width: 180px; margin-right: 10px;"
      >
        <el-option label="全部" value="" />
        <el-option label="存货盘点" value="inventory" />
      </el-select>
      <el-select 
        placeholder="请选择" 
        style="width: 180px; margin-right: 10px;"
      >
        <el-option label="全部" value="" />
        <el-option label="货品仓库一" value="1" />
      </el-select>
      <el-button>重置</el-button>
      <el-button type="primary">查询</el-button>
      <el-button>高级搜索</el-button>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="add()">新增</el-button>
      <el-button>删除</el-button>
      <el-button>导出</el-button>
      <el-button>作废</el-button>
      <el-button>锁定仓库</el-button>
      <el-button>刷新</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="tableData" 
      border 
      style="width: 100%; margin-top: 10px;"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column prop="code" label="盘点单号" width="100" />
      <el-table-column prop="result" label="盘点结果" width="100" />
      <el-table-column prop="warehouse" label="仓库名称" width="120" />
      <el-table-column prop="type" label="盘点类型" width="100" />
      <el-table-column prop="startTime" label="盘点开始时间" width="140" />
      <el-table-column prop="endTime" label="盘点结束时间" width="140" />
      <el-table-column prop="outStatus" label="出库状态" width="100" />
      <el-table-column prop="inStatus" label="入库状态" width="100" />
      <el-table-column prop="goods" label="盘点货品" width="200" />
      <el-table-column prop="count" label="盘点数量" width="80" />
      <el-table-column prop="profit" label="盘盈数量" width="80" />
      <el-table-column label="操作" width="100">
        <template #default>
          <el-button type="text" text-color="#409EFF">编辑</el-button>
          <el-button type="text" text-color="#F56C6C">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :total="100"
        :current-page="1"
        :page-size="10"
        style="margin-top: 20px;"
      />
    </div>
  </div>
</template>

<script setup>
// 硬编码表格数据
const tableData = [
  {
    code: 'PDDH2846',
    result: '草稿',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '未出库',
    inStatus: '未入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH9832',
    result: '草稿',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '未出库',
    inStatus: '未入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH864',
    result: '草稿',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '未出库',
    inStatus: '未入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH9896',
    result: '有盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '部分出库',
    inStatus: '部分入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH1380',
    result: '有盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '部分出库',
    inStatus: '部分入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH580',
    result: '有盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '已出库',
    inStatus: '部分入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH3629',
    result: '无盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '已出库',
    inStatus: '已入库',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH8637',
    result: '无盘亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '-',
    inStatus: '-',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH2705',
    result: '无盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '-',
    inStatus: '-',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  },
  {
    code: 'PDDH9699',
    result: '无盈亏',
    warehouse: '货品仓库一',
    type: '存货盘点',
    startTime: '2024-02-29',
    endTime: '2024-02-29',
    outStatus: '-',
    inStatus: '-',
    goods: '三锅头、可笑、何必等8项......',
    count: 50,
    profit: 50
  }
];

import { useRouter } from 'vue-router'; // 导入路由钩子
const router = useRouter(); // 创建路由实例
const add =()=>{
    //跳转到 InventoryCountItem
     router.push('/InventoryCountItem'); 
}

/* 动态逻辑暂注释，后续补充
const fetchData = async () => {
  // 实际接口请求逻辑
}
onMounted(() => {
  fetchData();
})
*/
</script>

<style scoped>
.inventory-count-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.pagination {
  text-align: right;
}
</style>